<template>
  <div class="d-flex w-100 flex-column" style="background-color: #f3f4f6">
    <div id="header" class="position-sticky top-0" style="background-color: rgba(59,59,59,0.75);z-index: 1000">
      <div class="container d-flex justify-content-between align-items-center">
        <a href="/"><img src="@/assets/image/logo.svg" alt="加载失败" style="width: 6rem;height: 3rem"></a>
        <div class="d-flex text-light">
          <div v-for="(item,index) in menuList2" :key="index" class="me-1 m-md-2 d-flex align-items-center headerNavItem ">
            {{ item.menu }}
            <div class="position-absolute start-0 top-100 w-100 bg-white text-black headerNavItemContent"
                 v-if="item.categorys?.length>0">
              <div class="position-relative container d-flex " style="min-height: 80vh;">
                <div class="col-12 col-md-4 col-lg-2 ">
                  <div v-for="(category,categoryIndex) in item.categorys" :key="categoryIndex">
                    <div class="text-secondary small">{{ category.category }}</div>
                    <div v-for="(product,productIndex) in category.prolist" :key="productIndex" class="infoItem">
                      <a :href="product.href" class="ms-3 d-flex align-items-center">
                        <img :src="product.img" alt="加载失败" style="width: 3rem">
                        <div class="ms-1">{{ product.name }}</div>
                      </a>
                      <div
                          class="position-absolute top-0 end-0 col-12 col-md-8 col-lg-10 h-100 flex-wrap bg-white infoContent"
                          :class="{infoContent1:productIndex===0 && categoryIndex===0 }">
                        <div class="w-100 d-flex flex-wrap">
                          <div v-for="(info,index) in product.infoList" :key="index" class="col-3">
                            <div class="m-1 d-flex flex-column align-items-center"
                                 style="background-color: #f4f4f4">
                              <div class="ratio ratio-4x3" style="--bs-aspect-ratio:100%">
                                <img :src="info.img_src" alt="加载失败">
                              </div>
                              <div>{{ info.name }}</div>
                              <div>{{ info.desc }}</div>
                            </div>
                          </div>
                        </div>
                        <div class="w-100 d-flex flex-wrap">
                          <div v-for="(info,index) in product.infoList2" :key="index" class="col-2">
                            <div class="m-1 d-flex flex-column align-items-center"
                                 style="background-color: #f4f4f4">
                              <div class="ratio ratio-4x3" style="--bs-aspect-ratio:100%">
                                <img :src="info.img_src" alt="加载失败">
                              </div>
                              <div>{{ info.name }}</div>
                              <div>{{ info.desc }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-2 d-flex align-items-center text-light rounded rounded-2" style="background-color: #4096ff">
          采购/合作
        </div>
        <img src="@/assets/image/用户-light.svg" alt="加载失败" class="align-self-center" style="width: 1rem">
      </div>
    </div>
    <div class="ratio ratio-16x9">
      <el-carousel @change="handleCarouselChange" :interval="3000" arrow="always" height="100%">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div class="position-fixed h-100">
            <img :src="item.imageUrl" alt="加载失败">
            <div class="position-absolute top-0 mt-3 w-100 d-flex flex-column align-items-center text-light">
              <div class="mt-3 h1" :class="{fallingText: currentIndex===index}" style="--num: 0.5s">
                {{ item.name }}
              </div>
              <div class="mt-3 h1" :class="{fallingText: currentIndex===index}" style="--num: 1s">
                {{ item.desc }}
              </div>
              <div class="mt-3 h3" :class="{fallingText: currentIndex===index}" style="--num: 1.5s">
                {{item.desc2}}
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="ratio ratio-16x9">
      <img src="https://www.unitree.com/images/7b830fccde8d41ac8e3fcec334e84735_3840x1988.jpg" alt="加载失败">
      <div class="mt-3 w-100 d-flex flex-column align-items-center text-light">
        <div class="mt-5 fs-3">进化永无止尽</div>
        <div class="fs-1">4D超广角激光雷达 性能更强劲 具身更智能</div>
      </div>
    </div>
    <div class="mt-3 w-100 d-flex flex-wrap">
      <div class="col-12 col-md-6" v-for="(item, index) in menu2" :key="index">
        <div class="imageWrapper m-3 d-flex flex-column align-items-center overflow-hidden"
             style="background-size: cover;background-position: center;background-repeat: no-repeat"
             :style="{backgroundImage:`url(${require('@/assets/image/背景2.png')})`}">
          <div class="mt-3 h3">{{ item.desc }}</div>
          <div class="h1">{{ item.name }}</div>
          <div class="d-flex">
            <a class="h4" :href="item.href">了解更多 ></a>
            <a class="ms-5 h4" :href="item.href2">立即购买 ></a>
          </div>
          <div class="ratio" style="--bs-aspect-ratio: 95%">
            <div class="w-100 h-100 d-flex flex-column justify-content-end" style="object-position: left bottom">
              <img :src="item.imgUrl" class="w-100 upperImg" style="overflow-clip-margin: content-box;overflow: clip;" alt="加载失败">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="mt-5 h1 text-center">新闻中心</div>
      <div class="mt-3 d-flex flex-wrap">
        <div class="col-12 col-md-6 mt-2 text-light">
          <div class="ratio ratio-4x3">
            <img :src="news.imgUrl" alt="加载失败">
            <div class="ms-5 d-flex flex-column justify-content-end">
              <div class="h3">{{ news.auth }}</div>
              <div class="h5">{{ news.desc }}</div>
              <div class="mb-3 mt-2">
                <a :href="news.href" class="px-3 py-2 text-dark bg-light rounded ratio-1x1">查看更多</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 mt-2 d-flex flex-column justify-content-between">
          <div v-for="(item,index) in news.list" :key="index" class="ms-2 d-flex bg-light">
            <div class="col-5">
              <div class="ratio ratio-16x9 ">
                <img :src="item.imgUrl" alt="加载失败">
              </div>
            </div>
            <div class="col-7">
              <div class="m-3 h5 text-truncate"> {{ item.title }}</div>
              <div class="mx-3 mt-3 d-flex text-secondary">
                <div class="text-secondary overflow-hidden"
                     style="display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
                  {{ item.desc }}
                </div>
                <div class="mx-3"> ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="mt-5 h1 text-center">重大事件</div>
      <div class="position-relative">
        <div class="container ratio ratio-16x9">
        </div>
        <div class="position-absolute start-0 top-0 w-100 h-100 ">
          <div class="w-100 h-100 ">
            <el-carousel :interval="5000" arrow="always" height="100%" style="height: 100%">
              <el-carousel-item v-for="(item, index) in eventList" :key="index">
                <div class="container">
                  <div class="position-relative">
                    <img :src="item.imgUrl" alt="加载失败" style="height: 100%">
                    <div class="position-absolute w-100 bottom-0 p-3 d-flex flex-wrap justify-content-between"
                         style="background-color: rgba(76,56, 96, .75)">
                      <div class="col-12 col-md-6 d-flex fs-6">
                        <span class="text-light">{{ item.title }}</span>
                        <a :href="item.link" class="ms-2" style="color: #69b1ff">了解更多</a>
                      </div>
                      <div class="col-12 col-md-6 text-light">{{ item.content }}</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="mt-5 h1 text-center">合作伙伴/客户</div>
      <div class="mt-3 w-100">
        <img src="@/assets/image/合作公司.jpeg" alt="加载失败" style="object-fit: cover">
      </div>
    </div>
    <div id="footer" class="mt-5 text-light" style="background-color: #22242f">
      <div class="container">
        <div class="d-flex justify-content-between">
          <div v-for="(level1,index) in list3" :key="index" class="mt-3">
            <div v-for="(level2,index2) in level1" :key="index2">
              <div class="mt-3 fs-6 fw-bold">
                {{ level2.title }}
              </div>
              <div v-for="(level3,index3) in level2.itemList" :key="index3" class="mt-2 d-flex" style="font-size: 0.8rem">
                <div v-for="(level4,index4) in level3" :key="index4" class="me-3">
                  <a :href="level4.href" class="text-light">{{ level4.name }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container mt-3 py-2 d-flex" style="border-bottom: grey 2px solid">
        <img src="@/assets/image/logo.svg" style="width: 7rem" alt="加载失败">
        <div v-for="item in list4" :key="item.name" class="ms-3">
          <a :href="item.href">{{item.name}}</a>
        </div>
        <div></div>
      </div>
      <div class="container mt-3">条款与政策</div>
      <div class="container mt-3 mb-3 d-flex">
        <div class="">Copyright © 2016 - 2024</div>
        <div class="ms-3">宇树科技版权所有</div>
        <a href="" class="ms-3">浙ICP备17044557号</a>
        <a href="" class="ms-3">浙公网安备 33010802011921号</a>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "HomePage",
  data() {
    return {
      hoverFlag: false,
      hoverFlag2: false,
      menuList2: [
        {
          "menu": "机器人",
          "categorys": [
            {
              "category": "机器狗 - 消费级 / 科研",
              "prolist": [
                {
                  "name": "Go2",
                  "href": "https://www.unitree.com/cn/go2",
                  "img": "https://www.unitree.com/images/b38e5a46270a40b2889b9b60a6388519_214x202.png",
                  "infoList": [
                    {
                      "name": "Go2",
                      "img_src": "https://www.unitree.com/images/65264e97e81744409042d34bf3ba6da6_400x400.png",
                      "href": "https://www.unitree.com/cn/go2",
                      "desc": "智能新物种"
                    },
                    {
                      "name": "Go2-W",
                      "img_src": "https://www.unitree.com/images/9896d21bdef4443d821a324931d8af0c_800x800.png",
                      "href": "https://www.unitree.com/cn/go2-w",
                      "desc": "玩转全地形"
                    }
                  ],
                  "infoList2": [
                    {
                      "name": "Go2 电池",
                      "img_src": "https://oss-global-cdn.unitree.com/static/e4bd330dd5e6409c8f1a5ff8a0960641_798x798.png",
                      "href": "https://www.unitree.com/cn/go2/battery"
                    },
                    {
                      "name": "Go2 充电器",
                      "img_src": "https://oss-global-cdn.unitree.com/static/022f2baf58ab42cb8b2a0be4acc7a143_400x400.png",
                      "href": "https://www.unitree.com/cn/go2/charger"
                    },
                    {
                      "name": "Go2 遥控器",
                      "img_src": "https://oss-global-cdn.unitree.com/static/8a60f0e75f1e4f75b13a7418aa0de443_400x400.png",
                      "href": "https://www.unitree.com/cn/go2/control"
                    },
                    {
                      "name": "Go2 足端",
                      "img_src": "https://oss-global-cdn.unitree.com/static/00bd2760698f484b97cd9fa08fbd4665_400x400.png",
                      "href": "https://www.unitree.com/cn/go2/foot"
                    }
                  ]
                },
                {
                  "name": "Go1",
                  "href": "https://www.unitree.com/cn/go1",
                  "img": "https://oss-global-cdn.unitree.com/2022/5/27/e1db3bce80b24857ae70e1ee917e8a77_214x202.png",
                  "infoList": [
                    {
                      "name": "Go1",
                      "img_src": "https://oss-global-cdn.unitree.com/static/f066844706c2417eb9bc4f094aff69cc_400x400.png",
                      "href": "https://www.unitree.com/cn/go1",
                      "desc": "天涯伴君行"
                    }
                  ],
                  "infoList2": [
                    {
                      "name": "Go1 电池",
                      "img_src": "https://oss-global-cdn.unitree.com/static/bc671939cf7940f7b21988a54c881e2d_400x400.png",
                      "href": "https://www.unitree.com/cn/go1/battery"
                    },
                    {
                      "name": "GO-M8010-6",
                      "img_src": "https://oss-global-cdn.unitree.com/static/35720c14a2da4ebab7525031c87baef3_400x400.png",
                      "href": "https://www.unitree.com/cn/go1/motor"
                    }
                  ]
                },
                {
                  "name": "A1",
                  "href": "https://www.unitree.com/cn/a1",
                  "img": "https://oss-global-cdn.unitree.com/static/1c3dba9751094afd9fdd284e0153341d_214x202.png",
                  "infoList": [
                    {
                      "name": "A1",
                      "img_src": "https://oss-global-cdn.unitree.com/static/ca2ca5aebb2f406fb5811ae5635df241_400x400.png",
                      "href": "https://www.unitree.com/cn/a1",
                      "desc": "高密集成，突破每一次运动极限"
                    },
                    {
                      "name": "犇犇",
                      "img_src": "https://oss-global-cdn.unitree.com/static/344fa4b7235843ec815deef5e92f6a29_400x400.png",
                      "href": "https://www.unitree.com/cn/benben",
                      "desc": "牛气冲天"
                    }
                  ],
                  "infoList2": [
                    {
                      "name": "A1 电池",
                      "img_src": "https://oss-global-cdn.unitree.com/static/dabe47d688aa474cae1d0f26d74b4d40_400x400.png",
                      "href": "https://www.unitree.com/cn/a1/battery"
                    },
                    {
                      "name": "A1 电机",
                      "img_src": "https://oss-global-cdn.unitree.com/static/692797a31a14419388ae7a2466f38bc8_400x400.png",
                      "href": "https://www.unitree.com/cn/a1/motor"
                    }
                  ]
                }
              ]
            },
            {
              "category": "机器狗 - 行业级",
              "prolist": [
                {
                  "name": "B2",
                  "href": "https://www.unitree.com/cn/b2",
                  "img": "https://www.unitree.com/images/4f219685ca7d4e0e88a0cc2aef4738ac_214x202.png",
                  "infoList": [
                    {
                      "name": "B2",
                      "img_src": "https://www.unitree.com/images/cd57d49a9d2a4388916f1adaf01e6753_800x800.png",
                      "href": "https://www.unitree.com/cn/b2",
                      "desc": "突破巅峰 超越极限"
                    },
                    {
                      "name": "B2-W",
                      "img_src": "https://www.unitree.com/images/f59567fae26a42b698e2d018af416942_400x400.png",
                      "href": "https://www.unitree.com/cn/b2-w",
                      "desc": "超越距离 释放效能"
                    }
                  ],
                  "infoList2": []
                },
                {
                  "name": "B1",
                  "href": "https://www.unitree.com/cn/b1",
                  "img": "https://oss-global-cdn.unitree.com/static/faa39701983b405bba3246ab615ba82a_107x101.png",
                  "infoList": [
                    {
                      "name": "B1",
                      "img_src": "https://oss-global-cdn.unitree.com/static/64c3b7912d7248f985a742b5a7d5e33c_400x400.png",
                      "href": "https://www.unitree.com/cn/b1",
                      "desc": "IP68防水，工业级超大负载"
                    }
                  ],
                  "infoList2": []
                },
                {
                  "name": "AlienGo",
                  "href": "https://www.unitree.com/cn/aliengo",
                  "img": "https://oss-global-cdn.unitree.com/static/234d923745da475b9e5658ca5c8c35ce_107x101.png",
                  "infoList": [
                    {
                      "name": "AlienGo",
                      "img_src": "https://oss-global-cdn.unitree.com/static/5669c2ba30fa4b5697e45da04fb7378a_400x400.png",
                      "href": "https://www.unitree.com/cn/aliengo",
                      "desc": "多功能性，行业级应用"
                    }
                  ],
                  "infoList2": [
                    {
                      "name": "AlienGo 电池",
                      "img_src": "https://oss-global-cdn.unitree.com/static/905eb8098ba64de589e539bb3349b6f2_400x400.png",
                      "href": "https://www.unitree.com/cn/aliengo/battery"
                    }
                  ]
                }
              ]
            },
            {
              "category": "机械臂",
              "prolist": [
                {
                  "name": "Z1 / D1-T",
                  "href": "https://www.unitree.com/cn/z1",
                  "img": "https://www.unitree.com/images/83adc1fba58d4f13b8082e6d32d7d249_214x202.png",
                  "infoList": [
                    {
                      "name": "Z1",
                      "img_src": "https://www.unitree.com/images/1c8386110a2647b8aa7dfe2a2f071648_400x400.png",
                      "href": "https://www.unitree.com/cn/z1",
                      "desc": "灵巧机械臂，完美协同"
                    },
                    {
                      "name": "D1-T",
                      "img_src": "https://oss-global-cdn.unitree.com/static/de6f3d3261a240cd9c2d88e67ea29291_400x400.png",
                      "href": "https://www.unitree.com/cn/D1-T",
                      "desc": "遥操作机械臂 助力具身智能研究"
                    }
                  ],
                  "infoList2": []
                }
              ]
            },
            {
              "category": "感知",
              "prolist": [
                {
                  "name": "4D 激光雷达",
                  "href": "https://www.unitree.com/cn/L2",
                  "img": "https://oss-global-cdn.unitree.com/static/1c891a226e104e7a836b03ccd5470997_214x202.png",
                  "infoList": [
                    {
                      "name": "4D 激光雷达 L2",
                      "img_src": "https://www.unitree.com/images/6b5cbcfad0374903ae118162ba7188d3_800x800.png",
                      "href": "https://www.unitree.com/cn/L2",
                      "desc": "全新升级"
                    },
                    {
                      "name": "4D 激光雷达 L1",
                      "img_src": "https://oss-global-cdn.unitree.com/static/3762b1ed5c57493eabaf5c901ac37af6_400x400.png",
                      "href": "https://www.unitree.com/cn/LiDAR",
                      "desc": "要相信光"
                    }
                  ],
                  "infoList2": []
                }
              ]
            },
            {
              "category": "组件",
              "prolist": [
                {
                  "name": "组件",
                  "href": "https://www.unitree.com/cn",
                  "img": "https://oss-global-cdn.unitree.com/static/16de7c33ec8b4032ba2a55dc3701b410_400x400.png",
                  "infoList": [],
                  "infoList2": [
                    {
                      "name": "A1 电机",
                      "img_src": "https://oss-global-cdn.unitree.com/static/692797a31a14419388ae7a2466f38bc8_400x400.png",
                      "href": "https://www.unitree.com/cn/a1/motor"
                    },
                    {
                      "name": "GO-M8010-6",
                      "img_src": "https://oss-global-cdn.unitree.com/static/35720c14a2da4ebab7525031c87baef3_400x400.png",
                      "href": "https://www.unitree.com/cn/go1/motor"
                    },
                    {
                      "name": "超级机器人防水关节: B1-16",
                      "img_src": "https://oss-global-cdn.unitree.com/static/60adb1af617d45d6942649052d3d50ca_400x400.png",
                      "href": "https://www.unitree.com/cn/b1-16"
                    },
                    {
                      "name": "SV1-25",
                      "img_src": "https://www.unitree.com/images/3840b4d188b6489ab7da10682383e314_400x400.png",
                      "href": "https://www.unitree.com/cn/sv1-25"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "menu": "通用人形",
          "categorys": [
            {
              "category": "通用人形",
              "prolist": [
                {
                  "name": "H1",
                  "href": "https://www.unitree.com/cn/h1",
                  "img": "https://www.unitree.com/images/fdff7695f62b42b89b2459a3a4405118_400x400.png",
                  "infoList": [
                    {
                      "name": "H1",
                      "img_src": "https://www.unitree.com/images/44c7cdd0d3454e11a9363665856c96db_800x800.png",
                      "href": "https://www.unitree.com/cn/h1",
                      "desc": "宇树首款 通用人形机器人"
                    }
                  ],
                  "infoList2": []
                },
                {
                  "name": "G1",
                  "href": "https://www.unitree.com/cn/g1",
                  "img": "https://www.unitree.com/images/57454c894f004e7fae6d69ca7164f13f_800x800.png",
                  "infoList": [
                    {
                      "name": "G1",
                      "img_src": "https://www.unitree.com/images/95907f5dec414c389c7cfc5704d2fd1e_800x800.png",
                      "href": "https://www.unitree.com/cn/g1",
                      "desc": "人形智能体 AI化身"
                    }
                  ],
                  "infoList2": []
                }
              ]
            }
          ]
        },
        {
          "menu": "行业应用",
          "categorys": []
        },
        {
          "menu": "健身",
          "categorys": [
            {
              "category": "健身",
              "prolist": [
                {
                  "name": "健身泵",
                  "href": "https://www.unitree.com/cn/pump",
                  "img": "https://oss-global-cdn.unitree.com/2022/6/2/891cec8a49884e02a6765c2e4571eca4_107x101.png",
                  "infoList": [
                    {
                      "name": "健身泵",
                      "img_src": "https://oss-global-cdn.unitree.com/static/e594fed5803c4344ba2cf222f6610c72_400x400.png",
                      "href": "https://www.unitree.com/cn/pump",
                      "desc": "口袋里的专业健身房"
                    }
                  ],
                  "infoList2": []
                }
              ]
            }
          ]
        },
        {
          "menu": "具身智能社群",
          "categorys": []
        },
        {
          "menu": "服务与支持",
          "categorys": []
        },
        {
          "menu": "关于宇树",
          "categorys": []
        },
        {
          "menu": "APP下载",
          "categorys": []
        }
      ],

      carouselItems: [
        {
          name: 'Unitree Go2-W',
          desc: '玩转全地形',
          desc2: '观看视频 >',
          href: "",
          imageUrl: 'https://www.unitree.com/images/d9516b16e7314d369f62cb5353a91da8_3840x2160.jpg'
        },
        {
          name: 'Unitree Go1',
          desc: '人形智能体 AI化身',
          desc2: '了解更多 >',
          href: "",
          imageUrl: 'https://www.unitree.com/images/ca48e088128e4a3cbbee87dbe03dd131_3840x2160.jpg'
        },
        {
          name: 'Unitree B2',
          desc: '突破巅峰 超越极限',
          desc2: '了解更多 >',
          href: "",
          imageUrl: 'https://www.unitree.com/images/537e431c5f6d49618496ffe19fb1987a_3840x2160.jpg'
        },
        {
          name: 'Unitree H1',
          desc: '宇树首款通用人形机器人',
          desc2: '了解更多 >',
          href: "",
          imageUrl: 'https://www.unitree.com/images/537e431c5f6d49618496ffe19fb1987a_3840x2160.jpg'
        },
      ],
      currentIndex: 0, // 初始索引
      menu2: [
        {
          name: 'B2',
          desc: '突破巅峰 超越极限',
          href: '',
          href2: '',
          imgUrl: 'https://www.unitree.com/images/5ec728dbd0494796950edaf9839340ce_1830x1600.png'
        },
        {
          name: 'Go2',
          desc: '具身智能 新物种',
          href: '',
          href2: '',
          imgUrl: 'https://www.unitree.com/images/a0811393701b4b95ba66ab1663c96fa4_1830x1600.png'
        },
        {
          name: 'G1',
          desc: '人形智能体 AI化身',
          href: '',
          href2: '',
          imgUrl: 'https://www.unitree.com/images/6613c61ef0d1412682b771fc62432a50_1464x1400.png'
        },
        {
          name: 'H1',
          desc: '宇树首款通用人形机器人',
          href: '',
          href2: '',
          imgUrl: 'https://www.unitree.com/images/7f5264940ec6415296350b62736ce21c_1830x1600.png'
        },
      ],
      news: {
        imgUrl: 'https://oss-global-cdn.unitree.com/forum/static/2024/7/5/234c5cbeb2fb49d2a55e1e01ad546b07_5081x3215.jpg',
        auth: '新闻中心',
        desc: '宇树发布 | Unitree G1 人形智能体 AI化身 ¥9.9万元起',
        href: '',
        list: [
          {
            title: '英伟达GTC大会丨宇树通用人形机器人H1与全球共同拥抱AI',
            desc: '2024年3月19日，英伟达CEO黄仁勋在美国加州圣何塞SAP中心发表主题演讲《见证AI的变革时刻》，正式拉开了2024年英伟达GTC大会的序幕。',
            imgUrl: 'https://oss-global-cdn.unitree.com/forum/static/2024/4/16/49f9bd00ea25416082391bf153a7219e_2000x1284.jpg'
          },
          {
            title: '90后机器人创业者，再次获得近10亿元人民币融资',
            desc: '过去的一年，机器人和生成式AI（GPT、Sora），是全世界最大的热点。',
            imgUrl: 'https://oss-global-cdn.unitree.com/forum/static/2024/4/16/28842b24e26c481f8c29e86582265e69_2000x1283.jpg'
          },
          {
            title: 'Unitree夺得IEEE Humanoids 2023冠军，在CES 2024盛大登场！',
            desc: '1月9日，在CES 2024国际消费电子展上，宇树携多款消费/科研级、行业级高性能通用足式/人形机器人与解决方案隆重亮相。',
            imgUrl: 'https://oss-global-cdn.unitree.com/forum/static/2024/4/16/28842b24e26c481f8c29e86582265e69_2000x1283.jpg'
          },
        ],
      },
      eventList: [
        {
          title: '“福虎”亮相2022北京冬奥会开幕式',
          content: '2022年2月4日晚，北京冬奥会开幕式圆满举行。在这立春时节，宇树109只“福虎”整齐排列成“冬奥会”字样亮相冬奥会开幕式，向世界人民奉献了一场无与伦比的视觉盛宴。',
          imgUrl: 'https://www.unitree.com/images/8962cb962e854453a4c9e084f5cc373f_2970x1486.jpeg',
          link: '',
        },
        {
          title: '世界首次！赛场上运铁饼的“小狗”，成了“显眼包”',
          content: '近日，在杭州亚运会网球比赛现场几只机器狗排队入场, 表演起了整齐划一的“舞蹈动作”, 给运动员们加油, 这一幕让网友直呼“科技感也太强了！',
          imgUrl: 'https://www.unitree.com/images/f48446a6254d4a07a1563614d900e03b_2970x1486.jpeg',
          link: '',
        },
        {
          title: '小牛“犇犇”强势登录牛年春晚',
          content: '2021年2月11日，24台A1以小牛“犇犇”的形象登录中央广播电视总台牛年春节联欢晚会，与刘德华、王一博、关晓彤同台演出《牛起来》，这是目前人类顶级足式机器人技术与中国传统生肖文化的深度交融，也是全球首次四足机器人动态走位集群舞蹈表演，引发了全民热议。',
          imgUrl: 'https://www.unitree.com/images/08d793c71f9c4b20b4063e921f0c3c85_2970x1486.jpeg',
          link: '',
        },
      ],
      list3: [
          [{'title': '机器狗 - 消费级/科研', 'itemList': [[{'href': 'https://www.unitree.com/cn/go2', 'name': 'Go2'}, {'href': 'https://www.unitree.com/cn/go2-w', 'name': 'Go2-W'}], [{'href': 'https://www.unitree.com/cn/go1', 'name': 'Go1'}], [{'href': 'https://www.unitree.com/cn/a1', 'name': 'A1'}]]},
            {'title': '机器狗 - 行业级', 'itemList': [[{'href': 'https://www.unitree.com/cn/b2', 'name': 'B2'}, {'href': 'https://www.unitree.com/cn/b2-w', 'name': 'B2-W'}], [{'href': 'https://www.unitree.com/cn/b1', 'name': 'B1'}], [{'href': 'https://www.unitree.com/cn/aliengo', 'name': 'AlienGo'}]]},
            {'title': '通用人形', 'itemList': [[{'href': 'https://www.unitree.com/cn/h1', 'name': 'H1'}], [{'href': 'https://www.unitree.com/cn/g1', 'name': 'G1'}]]}],
          [{'title': '健身', 'itemList': [[{'href': 'https://www.unitree.com/cn/pump', 'name': '健身泵'}]]},
            {'title': '机械臂', 'itemList': [[{'href': 'https://www.unitree.com/cn/z1', 'name': 'Z1'}], [{'href': 'https://www.unitree.com/cn/D1-T', 'name': 'D1-T'}]]},
            {'title': '感知', 'itemList': [[{'href': 'https://www.unitree.com/cn/L2', 'name': '4D 激光雷达 L2'}], [{'href': 'https://www.unitree.com/cn/LiDAR', 'name': '4D 激光雷达 L1'}]]},
            {'title': '组件', 'itemList': [[{'href': 'https://www.unitree.com/cn/a1/motor', 'name': 'A1 电机'}, {'href': 'https://www.unitree.com/cn/go1/motor', 'name': 'GO-M8010-6'}], [{'href': 'https://www.unitree.com/cn/sv1-25', 'name': 'SV1-25'}], [{'href': 'https://www.unitree.com/cn/b1-16', 'name': '超级机器人防水关节: B1-16'}]]}],
          [{'title': '行业应用', 'itemList': [[{'href': 'https://www.unitree.com/cn/industry/electricity', 'name': '巡检类落地方案'}], [{'href': 'https://www.unitree.com/cn/industry/fireControl', 'name': '消防救援'}]]},
            {'title': 'APP下载中心', 'itemList': [[{'href': 'https://www.unitree.com/cn/app/go2', 'name': 'Go2'}, {'href': 'https://www.unitree.com/cn/app/go1', 'name': 'Go1'}], [{'href': 'https://www.unitree.com/cn/app/h1', 'name': 'H1'}, {'href': 'https://www.unitree.com/cn/app/g1', 'name': 'G1'}], [{'href': 'https://www.unitree.com/cn/app/b2', 'name': 'B2'}], [{'href': 'https://www.unitree.com/cn/app/a1_aliengo', 'name': 'A1/AlienGo'}], [{'href': 'https://www.unitree.com/cn/app/pump', 'name': 'Unitree PUMP'}], [{'href': 'https://www.unitree.com/cn/app/simulator', 'name': 'Unitree Sim'}]]}],
          [{'title': '支持', 'itemList': [[], [{'href': 'https://www.unitree.com/cn/opensource', 'name': '官方开源'}], [{'href': 'https://support.unitree.com/main/zh', 'name': '文档中心'}], [{'href': 'https://www.unitree.com/cn/download/go1', 'name': '下载中心'}]]},
            {'title': '探索宇树科技', 'itemList': [[{'href': 'https://www.unitree.com/cn/news', 'name': '新闻中心'}]]}],
          [{'title': '社区', 'itemList': [[{'href': 'https://www.unifolm.com/', 'name': '具身智能社群'}]]}]
      ],
      list4:[
        {name:'关于我们',href:''},
        {name:'联系我们',href:''},
        {name:'采购/合作',href:''},
        {name:'供应商平台',href:''},
        {name:'客户服务',href:''},
      ],
    }

  },
  methods: {
    handleCarouselChange(index) {
      this.currentIndex = index;
    },
  },
  mounted() {
  },
  beforeDestroy() {
  },
}
</script>

<style scoped>
.fallingText {
  --num: 0s;
  opacity: 0;
  transform: translateY(-100%); /* 初始位置在视口上方 */
  animation: fallAndFadeIn 500ms ease-out var(--num) normal forwards;
}

@keyframes fallAndFadeIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.5; /* 中间阶段半透明 */
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.imageWrapper{

}

.upperImg {
  transition: all 0.3s ease; /* Smooth transition effect */
}

.imageWrapper:hover .upperImg {
  transform: scale(1.1); /* Scale up the image by 10% */
  transform-origin: 50% 100%;
}

.headerNavItem:hover {
  border-bottom: 2px solid black !important

}

.headerNavItemContent {
  display: none;
}

.headerNavItem:hover .headerNavItemContent, .headerNavItem:hover .infoContent1 {
  display: flex;
}

.infoItem:hover {
  background-color: #f4f4f4;
}

.infoContent {
  display: none;
}

.infoContent1 {
}

.infoItem:hover .infoContent {
  display: flex;
}
</style>

